<template>
  <view class="index-box">
    <topCard title="绑定手机号" subtitle=""></topCard>
    <view class="forget-box-center">
      <view class="input-box">
        <input
          v-model="inputPhone"
          class="input-item"
          placeholder-style="color:#fff"
          type="number"
          placeholder="输入手机号"
        />
      </view>
      <view class="input-box">
        <input
          v-model="inputCode"
          class="input-item"
          placeholder-style="color:#fff"
          type="number"
          placeholder="输入验证码"
          style="width: 300rpx"
        />
        <button class="in-btn" @click="startCountdown" :disabled="disabled">
          {{ disabled == true ? countdown + "秒后发送" : "发送验证码" }}
        </button>
      </view>
      <view class="forget-box-bottom" @click="forget">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, inject } from "vue";
import {
  usergGetSms,
  getUUID,
  massageUp,
  wxLoginBindPhoneApi,
} from "@/api/login";
import topCard from "./components/top-card/top-card.vue";
import wxQuicklyLogin from "./components/wx-quickly-login/index.vue";
import appQuickLogin from "./components/app-quickly-login/index.vue";
import { customNav } from "../../../utils/customNav";
const { proxy } = getCurrentInstance();
const list = ref([
  {
    defaultText: "输入手机号",
  },
  {
    defaultText: "输入验证码",
    testFlag: true,
  },
]);
const inputPhone = ref("");
const inputCode = ref("");
const inputNewPsd = ref("");
const confirmPsd = ref("");
const uuID = ref("");
const countdown = ref(30);
const disabled = ref(false);
const styles = ref({
  color: "#ffffff",
  backgroundColor: "#ffffff33",
  borderColor: "#ffffff",
});

const checked = ref(false);

function getContent() {
  checked.value = !checked.value;
}

function getuserprotocol(data) {
  uni.navigateTo({
    url: `/package_login/pages/login/protocol?id=${data}`,
  });
}

function getAther() {
  uni.navigateTo({
    url: "/package_login/pages/login/login",
  });
}
function isValidChinesePhoneNumber(phoneNumber) {
  return /^1[3-9]\d{9}$/.test(phoneNumber);
}
function startCountdown() {
  if (inputPhone.value == "") {
    proxy.modal.msg("请输入手机号");
    return;
  } else if (!isValidChinesePhoneNumber(inputPhone.value)) {
    proxy.modal.msg("请输入正确的手机号");
    return;
  }
  // 获取幂等值
  getUUID({
    phone: inputPhone.value,
  }).then((res) => {
    // console.log(res.data);
    uuID.value = res.data;
    // 获取短信验证码
    usergGetSms({
      mdKey: uuID.value,
      phoneNumberArray: [inputPhone.value],
      templateId: 2053181,
    }).then((res) => {
      if (res.code == 200) {
        countdown.value = 30; // 设置倒计时初始值
        disabled.value = true;
        const timer = setInterval(() => {
          if (countdown.value > 0) {
            countdown.value--; // 每秒减1
          } else {
            clearInterval(timer); // 倒计时结束，清除定时器
            disabled.value = false;
          }
        }, 1000);
      }
      console.log(res);
      proxy.modal.msg(res.msg);
    });
    console.log(uuID.value);
  });
}
const packageLoginPath = inject("packageLoginPath");

async function forget() {
  if (inputPhone.value == "") {
    proxy.modal.msg("请输入手机号");
    return;
  }
  if (inputCode.value == "") {
    proxy.modal.msg("请输入验证码");
    return;
  }

  const res = await wxLoginBindPhoneApi({
    phoneNumber: inputPhone.value,
    phoneCode: inputCode.value,
  });
  const { code, data } = res || {};
  if (code == 200) {
    proxy.modal.msg("绑定成功");
    setTimeout(() => {
      uni.switchTab({
        url: "/pages/index/index",
      });
    }, 1000);
  }
}
</script>

<style lang="less" scoped>
.index-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: @login-img;
  background-repeat: no-repeat;
  background-position: center center;
  justify-content: space-around;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;

  .input-item {
    color: #ffffff;
  }

  .password-checkes {
    color: #ffffff;
    font-family: "ali";
    text-decoration: underline;
    margin-top: 30rpx;
  }

  .forget-box-center {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    height: 60vh;
  }

  .forget-box-bottom {
    width: 80vw;
    height: 5vh;
    color: #ffffff;
    border-radius: 6rpx;
    font-family: "ali";
    font-size: 31.3rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    background-color: #5590f6;
  }

  .agree {
    margin-top: 1rem;
    color: #ffffff;
    font-size: 23rpx;
    display: flex;
    align-items: center;
    font-family: "ali";
    justify-content: center;

    .checkArgeen {
      width: 28rpx;
      height: 28rpx;
      background-color: #5d5d6880;
      border-radius: 50%;
      border: 0.5px solid #ffffff;
      margin-right: 0.5rem;
    }

    .check-box {
      .uni-checkbox-wrapper {
        .uni-checkbox-input {
          // border-radius: 50% !important;
          background: transparent !important;
        }
      }
    }
  }
}

.input-box {
  font-family: "ali";
  background-color: #9d9ea680;
  width: 80vw;
  height: 6vh;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  padding-left: 20rpx;
  position: relative;
  font-size: 31.3rpx;

  .uni-input-placeholder {
    color: #ffffff;
  }

  .in-btn {
    width: 204rpx;
    height: 64rpx;
    background-color: #5590f6;
    color: white;
    position: absolute;
    top: auto;
    font-size: 23.48rpx;
    line-height: 64rpx;

    right: 1rem;
  }
}
</style>
